<template>
	<view class="Collect">
		<view v-for="(item,index) in lists" :key="index" class="card">
			<view class="img">
				<img :src="transformAvatar(item.avatarUrl)" alt="" />
			</view>
			<view class="name">{{item.nickName}}</view>
			<view class="follow">
				<uni-fav :checked="item.followChecked" class="favBtn" bgColor="#007aff" bgColorChecked="#eeeeee"  fgColor="#fff"
				:contentText="{contentDefault: '未关注',contentFav: '已关注'}" star="false"
				@click="onCollectClick(index)"/>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../../utils/request.js"
	import {getUserId} from "../../../utils/auth.js"
	export default {
		data() {
			return {
				lists: [
				
				],//关注列表
			}
		},
		onReady() {
			uni.showLoading({})
			this.getList()
		},
		methods: {
			//转换图片链接
			transformAvatar(v) {
				if(v == null) return '/static/images/user/ico.png'
				return v.replaceAll('?','%3F').replaceAll('=','%3D')
			},
			//初始化关注列表信息
			getList() {
				request({
					url: '/followUser/getList',
					data: {
						id: getUserId()
					}
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					if(res.data)  res.data.forEach((item,index) => item.followChecked = true)
					this.lists = res.data
					console.log(this.lists)
				})
			},
			//点击收藏文章按钮
			onCollectClick(index) {
				console.log(index)
				this.lists[index].followChecked = !this.lists[index].followChecked
			},
		}
	}
</script>

<style scoped lang="scss">
.Collect  {
	width: 100%;
}

.card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	margin: 1px 0;
	width: 100%;
	height: 60px;
	
	.img {
		flex: 1;
		margin: 0 20px;
		height: 100%;
		display: flex;
		align-items: center;
		
		img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			border: 0;
		}
	}
	
	.name {
		flex: 3;
		  /*1. 先强制一行内显示文本*/
		      white-space: nowrap;
		  /*2. 超出的部分隐藏*/
		      overflow: hidden;
		  /*3. 文字用省略号替代超出的部分*/
		      text-overflow: ellipsis;
		font-size: 16px;
	}
	
	.follow {
		flex: 1;
		margin:0 20px;
	}
}
</style>
